import React, { useEffect, useRef, useState } from 'react'
import style from './mycenter.module.css'
import logo from '../../assets/images/logo.png'
import { useNavigate } from 'react-router-dom'
import image from '../../assets/head.png'
import { CopyOutlined } from '@ant-design/icons'
import wxin from '../../assets/images/wxin.png'
import qywxin from '../../assets/images/qywxin.png'
import { Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { message, Upload } from 'antd';
import imagetx from '../../assets/images/yulanimg.png'
import { getupload } from "../../request/index";
function Index() {
  const navigate = useNavigate()
  const toLogin = () => {
    localStorage.removeItem('token')
    window.location.href = '/home';
  }

  // 上传头像
  const [isModalOpen, setIsModalOpen] = useState(false);
  //
  const inp = useRef(null)
  //
  const [url, setUrl] = useState('https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg')
  //上传
  const upload = () => {
    let file = inp.current.files[0]
    console.log(file);
    if (!file) {
      alert('上传为空')
      return
    }

    let formate = new FormData()
    formate.append('file', file)
    getupload(formate).then(res => {
      console.log(res);
      if (res.data.code == 200) {
        setUrl(res.data.url)
        localStorage.setItem('imgurl', res.data.url)
      }
    })
  }
  //返回上一个页面
  const goback = () => {
    window.history.back();
  }

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const { Dragger } = Upload;

  const props: UploadProps = {
    name: 'file',
    multiple: true,
    action: 'http://localhost:30061/api/ben',
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };
  const [uploadMessage, setUploadMessage] = useState('');


  // 回显
  const [nickname, setNickname] = useState('');
  const [userId, setUserId] = useState('');
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');
  const [account, setAccount] = useState('')
  useEffect(() => {
    // 假设从 localStorage 获取用户信息
    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
    const imgurl = localStorage.getItem('imgurl') ? localStorage.getItem('imgurl') as string : ''
    if (userInfo) {
      setNickname(userInfo.nickname);
      setUserId(userInfo.userId);
      setPhone(userInfo.phone);
      setEmail(userInfo.email);
      setUrl(imgurl);
      setAccount(userInfo.account)
    }
    else {
      setNickname('');
      setUserId('');
      setPhone('');
      setEmail('');
      setUrl('https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg');
      setAccount('')
    }
  }, []);
  return (
    <div className={style.container}>
      <div className={style.logo}>
        <img src={logo} alt="" />
        <p onClick={goback} style={{ cursor: "pointer" }}>&lt;</p>
        <p>个人中心</p>
      </div>
      <div className={style.exit}>
        <div className={style.leverlogin}>
          <p>已有兑换码？点击兑换会员&gt; </p>
          <p onClick={toLogin}>退出登录</p>
        </div>
        {/* 个人信息 */}
        <div className={style.personal}>
          <p style={{ fontWeight: '600' }}>个人信息</p>
          <div className={style.newimage}>
            <input type='file' ref={inp} accept='image/*' multiple onChange={upload} style={{ display: "none" }} />
            <img src={url} style={{ width: '300px', height: '200px' }} onClick={() => inp.current.click()} />
          </div>
          {/* 上传成功信息 */}
          {uploadMessage && <p style={{ color: 'green' }}>{uploadMessage}</p>}
          {/* 弹框 */}
          <Modal width={500} title="上传头像" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <hr style={{ border: 'solid 1px #eee', marginBottom: '30px' }} />
            <div className={style.center}>
              <div>
                <Dragger {...props}>
                  <p className="ant-upload-drag-icon">
                    <br />
                    <PlusOutlined style={{ color: '#000', fontSize: '20px' }} />
                  </p>
                  <p className="ant-upload-text">添加图片</p>
                  <p className="ant-upload-hint">
                    只支持JPG、PNG、GIF，大小不超过3M <br />
                    建议尺寸240X240<br /><br />
                  </p>
                </Dragger>
                <div style={{ width: '300px', height: '40px' }}>
                  <div style={{ marginLeft: '200px', display: 'flex' }}>
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                  </div>
                </div>
              </div>
              <div style={{ marginLeft: '20px' }}>
                <img src={imagetx} style={{ width: '100px', height: '100px' }} alt="" />
                <p style={{ marginLeft: '30px' }}>头像预览</p>
              </div>
            </div>
          </Modal>
          <div className={style.msg}>
            <div className={style.many}>
              <p>用户昵称&nbsp;&nbsp;<span>{nickname}</span></p>
              <p style={{ color: '#0773fc', cursor: 'pointer' }}>编辑</p>
            </div>
            <div className={style.many} style={{ borderBottom: 'none' }}>
              <p>用户ID&nbsp;&nbsp;&nbsp;&nbsp;<span>{userId}</span>&nbsp;<CopyOutlined style={{ cursor: 'pointer', color: '#999' }}
                onClick={() => {
                  navigator.clipboard.writeText(userId)
                    .then(() => {
                      alert('用户ID复制成功!')
                    })
                    .catch(error => {
                      console.error('复制失败！', error)
                    })
                }}
              /></p>
            </div>
          </div>
        </div>
        {/* 账号管理 */}
        <div className={style.account}>
          <p style={{ fontWeight: '600' }}>账号管理</p>
          <div className={style.many}>
            <p>手机号&nbsp;&nbsp;&nbsp;<span>{phone}</span></p>
            <p style={{ color: '#0773fc', cursor: 'pointer' }}>更换&gt;</p>
          </div>
          <div className={style.many}>
            <p>邮箱&nbsp;&nbsp;&nbsp;<span>{email}</span></p>
            <p style={{ color: '#0773fc', cursor: 'pointer' }}>绑定&gt;</p>
          </div>
          <div className={style.many} style={{ borderBottom: 'none' }}>
            <p>密码&nbsp;&nbsp;&nbsp;<span>{account}</span></p>
            <p style={{ color: '#0773fc', cursor: 'pointer' }}>设置&gt;</p>
          </div>
        </div>
        {/* 第三方账号管理 */}
        <div className={style.thirdparty}>
          <p style={{ fontWeight: '600' }}>第三方账号管理</p>
          <div className={style.mangs}>
            <div style={{ display: 'flex' }}>
              <p style={{ lineHeight: '50px' }}><img src={wxin} alt="" />&nbsp;&nbsp;&nbsp;</p>
              <p>微信账号</p>
            </div>

            <p style={{ color: '#0773fc', cursor: 'pointer' }} ><span style={{ color: '#000' }}>创客贴用户</span> 解绑&gt;</p>
          </div>
          <div className={style.mangs} style={{ borderBottom: 'none' }}>
            <div style={{ display: 'flex' }}>
              <p style={{ lineHeight: '50px' }}><img src={qywxin} alt="" />&nbsp;&nbsp;&nbsp;</p>
              <p>企业微信账号</p>
            </div>
            <p style={{ color: '#0773fc', cursor: 'pointer' }}>绑定&gt;</p>
          </div>
        </div>
        <div className={style.delete}><p>删除账号</p></div>
      </div>
    </div>
  )
}

export default Index
